<template>
    <!-- 
        el-tree 树状结构


     -->
    <el-tree :props="props" :load="loadNode" lazy @node-click="clickHandle" show-checkbox accordion>
    </el-tree>
</template>

<script>
export default {
    data() {
        return {
            props: {
                label: 'title',
                children: 'zones',
                isLeaf: 'leaf'
            },
        };
    },
    methods: {
        //点击tree的节点触发的事件
        clickHandle(data, node) {
            // console.log('data',data,'node',node);
            this.$emit('sendTreeData', data)
        },
        //tree懒加载自动调用这个函数---自动调用不需要手动调用
        loadNode(node, resolve) {
            console.log('node--', node);
            if (node.level === 0) {
                let data = [{ title: '鱼类' }, { title: '肉类' }, { title: '虾类' }, { title: '蟹类' }];
                return resolve(data);
            }
            if (node.level >= 1) return resolve([]);

        },

    }

};
</script>

<style></style>